<!DOCTYPE HTML>
<html>
<head>
    <title>登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
        article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
        ol,ul{list-style:none;margin:0;padding:0;}
        blockquote,q{quotes:none;}
        blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
        table{border-collapse:collapse;border-spacing:0;}
        a{text-decoration:none;}
        nav.vertical ul li{	display:block;}
        nav.horizontal ul li{	display: inline-block;}
        img{max-width:100%;}
        body{
            background: #3f3f3f;
            padding:100px 0px 30px 0px;
            font-family: 'Roboto', sans-serif;
            font-size: 100%;
        }
        .login {
            width: 32%;
            margin: 0 auto;
        }
        .login h2 {
            font-size: 30px;
            font-weight: 700;
            color: #fff;
            text-align: center;
            margin: 0px 0px 50px 0px;
            font-family: 'Droid Serif', serif;
        }
        .login-top {
            background: #E1E1E1;
            border-radius: 25px 25px 0px 0px;
            -webkit-border-radius:  25px 25px 0px 0px;
            -moz-border-radius: 25px 25px 0px 0px;
            -o-border-radius: 25px 25px 0px 0px;
            padding: 40px 60px;
        }
        .login-top h1 {
            text-align: center;
            font-size: 27px;
            font-weight: 500;
            color: #F45B4B;
            margin: 0px 0px 20px 0px;
        }
        .login-top input[type="text"] {
            outline: none;
            font-size: 15px;
            font-weight: 500;
            color: #818181;
            padding: 15px 20px;
            background: #CACACA;
            border: 1px solid #ccc;
            border-radius:25px;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            -o-border-radius: 25px;
            margin: 0px 0px 12px 0px;
            width: 88%;
            -webkit-appearance: none;
        }
        .login-top input[type="password"]{
            outline: none;
            font-size: 15px;
            font-weight: 500;
            color: #818181;
            padding: 15px 20px;
            background: #CACACA;
            border: 1px solid #ccc;
            border-radius:25px;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            -o-border-radius: 25px;
            margin: 0px 0px 12px 0px;
            width: 88%;
            -webkit-appearance: none;
        }
        .forgot  a{
            font-size: 13px;
            font-weight: 500;
            color: #F45B4B;
            display: inline-block;
            border-right: 2px solid #F45B4B;
            padding: 0px 7px 0px 0px;
        }
        .forgot  a:hover{
            color: #818181;
        }
        .forgot input[type="submit"] {
            background: #F45B4B;
            color: #FFF;
            font-size: 17px;
            font-weight: 400;
            padding: 8px 7px;
            width: 20%;
            display: inline-block;
            cursor: pointer;
            border-radius: 6px;
            -webkit-border-radius: 19px;
            -moz-border-radius: 6px;
            -o-border-radius: 6px;
            margin: 0px 7px 0px 3px;
            outline: none;
            border: none;
        }
        .forgot input[type="submit"]:hover {
            background:#818181;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
        }
        .forgot {
            text-align: right;
        }
        .login-bottom {
            background: #E15748;
            padding: 30px 65px;
            border-radius: 0px 0px 25px 25px;
            -webkit-border-radius:  0px 0px 25px 25px;
            -moz-border-radius: 0px 0px 25px 25px;
            -o-border-radius: 0px 0px 25px 25px;
            text-align: right;
            border-top: 2px solid #AD4337;
        }
        .login-bottom h3 {
            font-size: 14px;
            font-weight: 500;
            color: #fff;
        }
        .login-bottom h3 a {
            font-size: 25px;
            font-weight: 500;
            color: #fff;
        }
        .login-bottom h3 a:hover {
            color:#696969;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
        }
        .copyright p {
            font-size: 15px;
            font-weight: 400;
            color: #fff;
        }
        .copyright p a{
            font-size: 15px;
            font-weight: 400;
            color: #E15748;
        }
        .copyright p a:hover{
            color: #fff;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
        }
        @media(max-width:1440px){
            .login {
                width: 35%;
            }
        }
        @media(max-width:1366px){
            .login {
                width: 37%;
            }
        }
        @media(max-width:1280px){
            .login {
                width: 40%;
            }
        }
        @media(max-width:1024px){
            .login {
                width: 48%;
            }
        }
        @media(max-width:768px){
            .login {
                width: 65%;
            }
            .login-top h1 {
                font-size: 25px;
            }
            .login-bottom h3 a {
                font-size: 22px;
            }
            body {
                padding: 100px 0px 0px 0px;
            }
            .login h2 {
                font-size: 28px;
            }
        }
        @media(max-width:640px){
            .login-top h1 {
                font-size: 23px;
            }
            .forgot input[type="submit"] {
                font-size: 15px;
                width: 22%;
            }
            .login-top input[type="text"] {
                padding: 12px 20px;
            }
            .login-top input[type="password"] {
                padding: 12px 20px;
            }
            .login-bottom h3 a {
                font-size: 19px;
            }
            .login-bottom h3 {
                font-size: 13px;
            }
            body {
                padding: 110px 0px 0px 0px;
            }
        }
        @media(max-width:480px){
            .login {
                width: 80%;
            }
            .login-top h1 {
                font-size: 21px;
            }
            .login-top input[type="text"] {
                width: 85%;
            }
            .login-top {
                padding: 30px 40px;
            }
            .login-top input[type="password"] {
                width: 85%;
            }
            .login h2 {
                font-size: 25px;
            }
        }
        @media(max-width:320px){
            .login {
                width: 90%;
            }
            .login-top {
                padding: 20px 25px;
            }
            .login-top input[type="text"] {
                width: 81%;
                padding: 10px 20px;
                font-size: 13px;
                margin: 0px 0px 7px 0px;
            }
            .login-top input[type="password"] {
                width: 81%;
                padding: 10px 20px;
                font-size: 13px;
                margin: 0px 0px 7px 0px;
            }
            .forgot input[type="submit"] {
                font-size: 11px;
                width: 25%;
                padding: 6px 7px;
            }
            .forgot  a {
                font-size: 11px;
            }
            .login-bottom {
                padding: 20px 25px;
            }
            .login-bottom h3 {
                font-size: 11px;
            }
            .login-bottom h3 a {
                font-size: 17px;
            }
            body {
                padding: 50px 0px 0px 0px;
            }
            .copyright p {
                font-size: 13px;
            }
            .copyright p a{
                font-size: 13px;
            }
            .login h2 {
                font-size: 23px;
                margin:0px 0px 35px 0px;
            }
        }
    </style>
</head>
<body>
<div class="login">
    <h2>Acced Form</h2>
    <div class="login-top">
        <h1>LOGIN FORM</h1>
        <form action="/login" method="post">
            <input type="text" name="username" placeholder="username" />
            <input type="password" name="password" placeholder="password" />
            <!-- 图形验证码 -->
            <div style="display: flex">
                <input type="text" name="captcha" placeholder="captcha"/>
                <img src="/captcha/getImage" alt="captcha" height="50px" width="150px" style="margin-left: 20px">
            </div>
            <!-- 图形验证码 -->
            <div class="forgot">
                <a href="#">forgot Password</a>
                <input type="submit" value="Login" >
            </div>
        </form>
    </div>
    <div class="login-bottom">
        <h3>New User &nbsp;<a href="#">Register</a>&nbsp Here</h3>
    </div>
</div>


</body>
</html>